<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
computed和watch之间的区别是
1.computer能完成的功能，洼田崇都可以完成
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
两个重要的小原则
1.所被vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等）最好写成箭头函数
这样的this指向才是vm或组件实例对象
     -->
</head>

<body>
    <div id="root">
        姓:<input type="text" v-model="firstname"> <br><br>
        名:<input type="text" v-model="lastname"><br><br>
        <span>{{fullname}}</span>
        <span>{{fullname}}</span> <!-- 多个get也只被调用一次 -->
        <span>{{fullname}}</span>
        <span>{{fullname}}</span>


    </div>
    <script src="../vue.js"></script>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: "#root",
            data:
            {
                firstname: '张',
                lastname: '三',
                fullname: '张-三'
            },
            watch:
            {
                //监视的话可以很流畅地开启异步任务 监视里的函数应该这样写()=> 箭头函数
                firstname(val) {
                    setTimeout(() => {
                        this.fullname = val + '-' + this.lastname
                    },1000)
                },
                lastname(val) {
                    this.fullname = this.firstname + '-' + val
                },
                fullname(val) {
                    const arr = val.split('-');
                    this.firstname = arr[0]
                    this.lastname = arr[1]
                }
            }
        })
    </script>
</body>

</html>